<template>
  <div id="addTeacher">
    <h1>新增教师</h1>
    <p>
      <label for="">教师姓名</label>
      <el-input v-model.lazy="teacherData.name"></el-input>
    </p>
    <div>
      <label for="">性别</label>
      <div class="genderBox">
        <el-radio v-model="teacherData.gender" value="male" label="male"
          >男</el-radio
        >
        <el-radio v-model="teacherData.gender" value="female" label="female"
          >女</el-radio
        >
      </div>
    </div>
    <p>
      <label for="">年龄</label>
      <el-input v-model="teacherData.gender" type="number"></el-input>
    </p>
    <p>
      <label for="">授教科目</label>
      <el-select type="primary" plain v-model="teacherData.course"
        >确认新增</el-select
      >
    </p>
    <div>
      <el-button type="primary" plain @click="open">确认新增</el-button>
    </div>
  </div>
</template>



<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions: teacherMapActions } = createNamespacedHelpers("teacher");

export default {
  data() {
    return {
      teacherData: {
        name: "",
        age: "",
        gender: "",
        course: "",
      },
    };
  },
  methods: {
    ...teacherMapActions(["addTeacher"]),
    open() {
      this.$confirm("确认新增教师?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await this.addTeacher(this.teacherData);
          console.log(data);
          if (data.status) {
            this.$message({
              type: "success",
              message: data.message,
            });
            //新增成功后，清除历史
            this.teacherData.name = "";
            this.teacherData.age = "";
            this.teacherData.gender = "";
            this.teacherData.course = "";
          } else {
            this.$message({
              type: "error",
              message: data.message,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消新增！",
          });
        });
    },
  },
};
</script>

<style scoped>
#addTeacher {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#addTeacher p {
  display: flex;
}

#addTeacher p label {
  width: 120px;
}
</style>